<template>
	<view class="content" :class="show ? 'fade-in' : 'fade-out'">
		<view class="form-item">
			<view class="title">真实姓名</view>
			<view class="input tn-flex tn-flex-col-center">
				<input type="text" placeholder="请输入真实姓名" placeholder-class="p-class" v-model="FormData.username" />
			</view>
		</view>
		<view class="form-item">
			<view class="title">证件号码</view>
			<view class="input tn-flex tn-flex-col-center">
				<input type="text" placeholder="请输入身份证号码" placeholder-class="p-class" v-model="FormData.card_id" />
			</view>
		</view>
		<view class="form-item">
			<view class="title">您的位置</view>
			<view class="input tn-flex tn-flex-col-center tn-flex-row-between" @click="getLocation">
				<view class="p-class" v-if="FormData.city == ''">请点击获取您的位置</view>
				<view class="pitchValue" v-else>{{FormData.city}}</view>
				<image src="/static/index/sj1.png" mode="" class="img1"></image>
			</view>
		</view>
		<view class="form-item">
			<view class="title1">请上传身份证的正反面</view>
			<view class="uploading" @click="uploadingCard(1)">
				<view class="u-left">
					<view class="name">头像面</view>
					<view class="hint">上传您的身份证头像面</view>
				</view>
				<view class="u-right">
					<image v-if="FormData.card_avatar" :src="FormData.card_avatar" class="img1" mode=""></image>
					<image v-else src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/zheng.png" class="img1"
						mode=""></image>
				</view>
			</view>
			<view class="uploading" @click="uploadingCard(2)">
				<view class="u-left">
					<view class="name">国徽面</view>
					<view class="hint">上传您的身份证国徽面</view>
				</view>
				<view class="u-right">
					<image v-if="FormData.card_arms" :src="FormData.card_arms" class="img1" mode=""></image>
					<image v-else src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/fan.png" class="img1"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="form-item">
			<view class="title1">服务类型</view>
			<view class="ftitle1">*请选择您在本平台能提供的服务类型</view>
			<view class="tag">
				<!-- pitch -->
				<block v-for="(item,index) in payTypeList" :key="index">
					<view class="t1" :class="[{'pitch':item.show}]" @click="payTypeClick(index,item.id)">{{item.name}}
					</view>
				</block>
			</view>
		</view>
		<view class="form-item skill-form-item">
			<view class="title1">技术水平证明截图</view>
			<view class="ftitle1">*图片包含清晰ID和当前段位，最多九张图</view>
			<view class="voice tn-flex">
				<block v-for="(item,index) in FormData.images" :key="index">
					<view class="uimg">
						<image :src="item" class="selectedImg" mode=""></image>
						<image src="/static/my/imgClose.png" @click="delImg(index)" class="imgClose" mode=""></image>
					</view>
				</block>
				<image v-if="FormData.images.length < 9" src="@/static/uploading.png" @click="skillImgUpload"
					class="uimg" mode=""></image>
			</view>
		</view>
		<view class="form-item">
			<view class="title1">个人简介</view>
			<view class="textarea">
				<textarea style="width: 100%;" placeholder="请您介绍您的服务特色、技术特长、个人风格（至少20个字）" placeholder-class="p-class"
					v-model="FormData.introduce"></textarea>
			</view>
		</view>
		<view class="xieyi" @click="checkAgreement">
			<image src="/static/index/pitchon.png" v-if="agreementShow" mode=""></image>
			<image src="/static/index/unselected.png" v-else mode=""></image>
			<view class="x-text">本人确认已满18岁，我已阅读并同意遵守 <text @click.stop="goAbout">《平台服务规范》</text> </view>
		</view>

		<view class="tishi" v-if="FormData.status && FormData.status == 3">驳回原因：{{FormData.cause}}</view>
		<view class="btn" @click="submit">{{setBtnTex}}</view>

		<permissionGuide ref="refPermissionGuide" />
	</view>
</template>

<script>
	import {
		imgUploading
	} from "@/common/common.js"
	import {
		GDWEBKEY
	} from '@/siteinfo.js'
	import permissionGuide from "@/components/permissionGuide/index.vue"
	export default {
		components: {
			permissionGuide
		},
		data() {
			return {
				show: false,
				FormData: {
					username: '', //姓名
					card_id: '', // 身份证号
					card_avatar: '', // 	身份证头像面
					card_arms: '', //身份证国徽面
					play_type_ids: [], //	服务类型（英文逗号拼接）
					images: [], //	技能图片（英文逗号拼接）
					introduce: '', //介绍
					// lat: '26.676934',
					// lng: '106.625882',
					// city: '贵阳市'
					lat: '',
					lng: '',
					city: ''
				},
				uImgType: 0,
				payTypeList: [],
				serveId: 0,
				agreementShow: true
			};
		},
		onLoad(option) {
			this.getPlayType()
			this.setindex()
			if (option.type == 1 || option.type == 3) {
				this.getPlayApplyInfo()
			}
		},
		onReady() {
			if (!this.FormData.status) {
				this.show = true
			}

		},
		computed: {
			setBtnTex() {
				return this.FormData.status == 1 ? '正在审核中' : this.FormData.status == 3 ? '申请已驳回，重新提交' : '提交认证'
			}
		},
		methods: {
			// 提交认证
			submit() {
				if (this.FormData.status && this.FormData.status == 1) {
					uni.showToast({
						title: '您的申请正在审核中',
						icon: "none"
					})
					return
				}
				if (this.FormData.username == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: "none"
					})
					return
				}
				if (this.FormData.card_id == '') {
					uni.showToast({
						title: '请输入证件号码',
						icon: "none"
					})
					return
				}
				if (this.FormData.city == '') {
					uni.showToast({
						title: '请确定您的位置',
						icon: "none"
					})
					return
				}
				if (this.FormData.card_avatar == '' || this.FormData.card_arms == '') {
					uni.showToast({
						title: '请上传身份证照片',
						icon: "none"
					})
					return
				}
				if (this.FormData.play_type_ids.length == 0) {
					uni.showToast({
						title: '至少选择一个服务类型',
						icon: "none"
					})
					return
				}
				if (this.FormData.images.length == 0) {
					uni.showToast({
						title: '请上传技能水平截图',
						icon: "none"
					})
					return
				}
				if (this.FormData.introduce == '') {
					uni.showToast({
						title: '请输入个人简介',
						icon: "none"
					})
					return
				}
				if (!this.agreementShow) {
					uni.showToast({
						title: '请阅读勾选平台服务规范',
						icon: "none"
					})
					return
				}
				let play_type_ids = this.FormData.play_type_ids.toString()
				let images = this.FormData.images.toString()
				this.$request({
					loading: 1,
					method: 'post',
					url: '/api/play/play_apply',
					data: {
						...this.FormData,
						play_type_ids,
						images

					}
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: err.data.msg,
						icon: "none"
					})
				})
			},
			// 获取认证信息
			getPlayApplyInfo() {
				this.$request({
					loading: 0,
					method: 'post',
					url: '/api/play/play_apply_info'
				}).then(res => {
					let data = res.data.data
					data.images = data.images.map(val => {
						return val.path
					})
					this.FormData = data
					this.FormData.card_arms = data.card_arms.path
					this.FormData.card_avatar = data.card_avatar.path
					this.FormData.play_type_ids = this.FormData.play_type_ids.split(',')
					// 处理技能水平截图
					this.payTypeList.filter(item => this.FormData.play_type_text.includes(item.name)).map(item => {
						item.show = true
						return item
					})
					this.show = true
				})
			},
			// 获取平台服务规范
			setindex() {
				this.$request({
					loading: 0,
					method: 'post',
					url: '/api/user/setindex'
				}).then(res => {
					this.serveId = res.data.data.news.filter(val => {
						return val.title == '平台服务规范'
					})
				})
			},
			// 获取服务类型
			getPlayType() {
				this.$request({
					loading: 1,
					method: 'post',
					url: '/api/play/play_type'
				}).then(res => {
					res.data.data.forEach(val => {
						val.show = false
					})
					this.payTypeList = res.data.data
				})
			},
			// 选择服务类型
			payTypeClick(index, id) {
				this.payTypeList[index].show = !this.payTypeList[index].show
				if (this.payTypeList[index].show) {
					this.FormData.play_type_ids.push(id)
				} else {
					this.FormData.play_type_ids = this.FormData.play_type_ids.filter(val => {
						return val != id
					})
				}
			},
			// 上传证件
			uploadingCard(type) {
				this.uImgType = type
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseImage("album");
						}
						if (res.tapIndex == 1) {
							this.handleChooseImage("camera");
						}
					}
				})
			},
			// 上传技能截图
			skillImgUpload() {
				this.uImgType = 3
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseImage("album");
						}
						if (res.tapIndex == 1) {
							this.handleChooseImage("camera");
						}
					}
				})
			},
			handleChooseImage(sourceType) {
				this.$uniApiBaseChooseImage({
					count: this.uImgType == 3 ? 9 - this.FormData.images.length : 1,
					sourceType: [sourceType],
				}).then((res) => {
					this.recursionUImg(res.tempFilePaths, 0)
				}).catch(error => {
					if (error.errMsg == "show-permision-guide") {
						this.$refs.refPermissionGuide.open({
							perName: sourceType
						})
					}
				})
			},
			// 删除技能截图
			delImg(index) {
				this.FormData.images.splice(index, 1)
			},
			recursionUImg(tempFilePaths, index) {
				uni.showLoading({
					title: '上传中'
				});
				if (index == tempFilePaths.length || this.FormData.images.length == 9) {
					console.log("所有图片上传完成");
					uni.hideLoading();
					return;
				}
				imgUploading(tempFilePaths[index]).then(res => {
					console.log("第" + (index + 1) + "张图片上传成功");
					console.log(res)
					let {
						file
					} = res.data
					if (this.uImgType == 1) {
						this.FormData.card_avatar = file
					} else if (this.uImgType == 2) {
						this.FormData.card_arms = file
					} else if (this.uImgType == 3) {
						this.FormData.images.push(file)
					}

					this.recursionUImg(tempFilePaths, index + 1);
				}).catch(err => {
					console.log("第" + (index + 1) + "张图片上传失败");
					uni.showModal({
						title: '提示',
						content: '上传失败了，可能图片太大导致，请重试'
					});
				})

			},
			goAbout() {
				uni.navigateTo({
					url: "/homePages/about?id=" + this.serveId[0].id
				})
			},
			checkAgreement() {
				this.agreementShow = !this.agreementShow
			},
			// 选择位置
			getLocation() {
				getApp().handleSysGetLocation().then(res => {
					this.FormData.lat = res.latitude
					this.FormData.lng = res.longitude
					// #ifdef APP-PLUS
					this.FormData.city = res.address.city
					// #endif
					// #ifndef APP-PLUS
					this.GDAPI(res.longitude, res.latitude)
					// #endif
				})
			},
			GDAPI(lng, lat) {
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
					method: "GET",
					data: {
						key: GDWEBKEY,
						location: `${lng},${lat}`
					},
					success: (res) => {
						if (res.data.status == 1) {
							this.FormData.city = res.data.regeocode.addressComponent.city
						} else {
							uni.showToast({
								title: '定位失败，请重试',
								icon: "none"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 24rpx 30rpx;

		.form-item {
			margin-bottom: 32rpx;

			.title {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				margin-bottom: 16rpx;
			}

			.title1 {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				// margin-bottom: 32rpx;
			}

			.ftitle1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333ad;
				margin-top: 12rpx;
			}

			.p-class {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
			}

			.input {
				height: 90rpx;
				background: #ffffff;
				border-radius: 20rpx;
				padding-left: 24rpx;
				padding-right: 24rpx;

				input {
					color: #333333;
				}

				.img1 {
					width: 32rpx;
					height: 18rpx;
				}

				.pitchValue {
					color: #333333;
				}

			}

			.uploading {
				height: 284rpx;
				background: #ffffff;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx;
				margin-top: 32rpx;

				.u-left {
					.name {
						font-size: 40rpx;
						font-weight: bold;
						color: #333333;
					}

					.hint {
						font-size: 26rpx;
						font-weight: 400;
						color: #999999;
						margin-top: 16rpx;
					}
				}

				.u-right {
					.img1 {
						width: 340rpx;
						height: 220rpx;
					}
				}
			}

			.tag {
				margin-top: 24rpx;
				display: flex;
				flex-wrap: wrap;

				.t1 {
					padding: 14rpx 40rpx;
					background: #3E3F47;
					border-radius: 37rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					margin-right: 24rpx;
					margin-bottom: 5px;
				}

				.pitch {
					background: linear-gradient(180deg, #F783C3 0%, #A66FF7 100%);
				}

			}

			.voice {
				margin-top: 24rpx;
				flex-wrap: wrap;

				.img1 {
					width: 240rpx;
					height: 240rpx;
				}

				.uimg {
					width: 160rpx;
					height: 160rpx;
					position: relative;
					margin-right: 17rpx;
					margin-bottom: 17rpx;

					.selectedImg {
						width: 100%;
						height: 100%;
					}

					.imgClose {
						width: 49rpx;
						height: 46rpx;
						position: absolute;
						top: 0;
						right: 0;
					}
				}

				.voiceKuai {
					width: fit-content;
					height: 72rpx;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 45rpx;
					padding: 0 16rpx;
					margin-bottom: 16rpx;

					.play {
						width: 48rpx;
						height: 48rpx;
					}

					.playIcon {
						width: 133rpx;
						height: 44rpx;
						margin: 0 16rpx;
					}

					.op-animation {
						animation: identifier 0.5s infinite;
					}

					.s {
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.reset-text {
					font-size: 24rpx;
					font-weight: 500;
					color: #CCCCCC;
					margin-left: 20rpx;
					text-decoration: underline;
				}
			}

			.textarea {
				height: 327rpx;
				background: #ffffff;
				border-radius: 20rpx;
				margin-top: 16rpx;

				textarea {
					padding: 24rpx;
					color: #333333;
				}
			}

			&:nth-child(6) {
				margin-bottom: 0;
			}
		}

		.skill-form-item {
			margin-bottom: 16rpx;
		}

		.xieyi {
			display: flex;
			align-items: center;
			margin-top: 24rpx;

			image {
				width: 26rpx;
				height: 26rpx;
			}

			.x-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				margin-left: 12rpx;

				text {
					color: #9D5EF4;
				}

			}
		}

		.btn {
			height: 98rpx;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			border-radius: 49rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 98rpx;
			margin-top: 64rpx;
		}

		.tishi {
			// 浅色版本 #F02320 深色版本 #FBE12B
			color: #FBE12B;
			font-size: 24rpx;
			margin-top: 20rpx;
		}


	}
</style>